Ext.regApplication('MyApp', {

    launch: function() {

        //Definition of the initial NestedList data
        var data = {
            text: 'Groceries',
            items: [{
                text: 'Drinks',
                items: [{
                    text: 'Water',
                    items: [{
                        text: 'Sparkling',
                        leaf: true
                    },{
                        text: 'Still',
                        leaf: true
                    }]
                },{
                    text: 'Coffee',
                    leaf: true
                },{
                    text: 'Espresso',
                    leaf: true
                },{
                    text: 'Redbull',
                    leaf: true
                },{
                    text: 'Coke',
                    leaf: true
                },{
                    text: 'Diet Coke',
                    leaf: true
                }]
            },{
                text: 'Fruit',
                items: [{
                    text: 'Bananas',
                    leaf: true
                },{
                    text: 'Lemon',
                    leaf: true
                }]
            },{
                text: 'Snacks',
                items: [{
                    text: 'Nuts',
                    leaf: true
                },{
                    text: 'Pretzels',
                    leaf: true
                },{
                    text: 'Wasabi Peas',
                    leaf: true
                }]
            },{
                text: 'Empty Category',
                items: []
            }]
        };
        
        //Definition of the Data Model
        Ext.regModel('ListItem', {
            idProperty: 'text',
            fields: [{name: 'text', type: 'string'}]
        });
        
        //Definition of the NestedList Store
        var store = new Ext.data.TreeStore({
            model: 'ListItem',
            root: data,
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'tree',
                    root: 'items'
                }
            }
        });
        
        //Definition of the function that will add the 'Vine' record
        var addVine = function(){
            
            //Getting the NestedList 'Drinks' node
            var drinksNode = store.getNodeById('Drinks');
            
            //Getting the Drinks store
            var drinksStore = store.getSubStore(drinksNode);

            //Definition of the 'Vine' record
            var vine = Ext.ModelMgr.create({
                text: 'Vine'
            }, 'ListItem');
            
            //Adding the 'Vine' record inside the Drinks Store
            drinksStore.add(vine);
            
        };
        
        //Definition of the NestedList
        var nestedList = new Ext.NestedList({
            title: 'Groceries',
            displayField: 'text',
            store: store
        });
    
        //Definition of the Viewport
        var viewport = new Ext.Panel({
            fullscreen: true,
            layout: 'fit',
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Add Vine',
                    handler: addVine
                }]
            }],
            items: [nestedList]
        });

    }

});